<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.title" placeholder="请输入服装类别名称" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.status" placeholder="状态" style="width: 120px" size="small">
                        <el-option value="1" label="启用"></el-option>
                        <el-option value="0" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" @click="openAddBtn" size="small" :loading="btnLoading"
                    :disabled="nodeActions.indexOf('edit')<0">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading">
                <el-table-column type="index" label="序号" width="90"></el-table-column>
                <el-table-column prop="base_category" label="服装类别名称" width="200"></el-table-column>
                <el-table-column label="尺码" prop="base_size_code">
                    <template slot-scope="{ row }">
                        <el-popover placement="right-start" width="200" trigger="hover">
                            <el-row>
                                <el-tag v-for="(item, index) in row.base_size_code" :key="index" size="mini" style="margin: 0 4px 4px 0;">
                                    {{ item.size_code.title }}
                                    <span v-if="item.height_code.length!=0">({{ item.height_code.title }}/{{item.waist_code.title }})</span>
                                </el-tag>
                            </el-row>
                            <div slot="reference" class="ellipsis">
                                <el-tag v-for="(item, index) in row.base_size_code" :key="index" size="mini" style="margin-right: 2px;">
                                    {{ item.size_code.title }}
                                    <span v-if="item.height_code.length!=0">({{ item.height_code.title }}/{{item.waist_code.title }})</span>
                                </el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="基码" prop="brand" width="150">
                    <template slot-scope="{ row }">
                        <el-tag size="mini">
                            {{ row.base_code.size_code.title }}
                            <span v-if="row.base_code.height_code.length!=0">({{row.base_code.height_code.title }}/{{ row.base_code.waist_code.title }})</span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="base_status" label="当前状态" width="120">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.base_status" active-color="#13ce66" :active-value=1 :inactive-value=0
                                   @change="changStatus(scope.$index, scope.row.base_status)" :disabled="nodeActions.indexOf('edit')<0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="openEditBtn(scope.row)" :disabled="nodeActions.indexOf('edit')<0">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--修改、新增基码-->
        <el-drawer :title="editTitle" :visible.sync="editVisible" size="700px" direction="rtl" :wrapperClosable="false">
            <el-row style="padding: 0 0 10px 10px;">
                <el-col :span="24">
                    <div>
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">基本信息</span>
                    </div>
                    <el-form :model="editForm" label-position="right" label-width="120px" :rules="rules">
                        <el-form-item label="服装类别名称：" prop="base_category">
                            <el-input size="small" v-model.trim="editForm.base_category" placeholder="请输入服装类别名称" style="width: 80%" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="胸围/腰围：">
                            <el-select size="small" v-model="editForm.type" placeholder="请选择胸围或腰围" style="width: 80%" @change="changeWaistBtn">
                                <el-option v-for="(item, index) in types" :key="index" :label="item.label" :value="item.type"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row style="padding: 0 0 10px 10px;">
                <el-col :span="24">
                    <div>
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">尺码信息</span>
                        <el-button type="text" class="el-icon-circle-plus-outline" style="color: #409eff; font-size: 24px; margin-left: 10px"
                            @click="openAddSizeBtn"></el-button>
                    </div>
                    <el-table :data="editForm.base_size_code" style="width: 100%" :max-height="drawerTableHeight">
                        <el-table-column prop="is_base" label="基码选择" align="center" width="100">
                            <template slot-scope="scope">
                                <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.is_base" @change="changeBaseBtn($event, scope.$index)"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column prop="size_code" label="尺码" align="center">
                            <template slot-scope="{ row }">
                                <el-popover placement="right-start" width="200" trigger="click">
                                    <el-row>
                                        {{row.size_code.title}}
                                    </el-row>
                                    <div slot="reference" class="ellipsis">
                                        {{ row.size_code.title }}
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="height_code" label="身高(cm)" align="center">
                            <template slot-scope="{ row }">{{row.height_code.title }}</template>
                        </el-table-column>
                        <el-table-column prop="waist_code" :label="editForm.type == 8 ? '腰围' : '胸围'" align="center">
                            <template slot-scope="{ row }">{{ row.waist_code.title }}</template>
                        </el-table-column>
                        <el-table-column prop="address" align="center" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="text" class="el-icon-edit" @click="openEditSizeBtn(scope.$index, scope.row)"></el-button>
                                <el-button type="text" class="el-icon-delete" style="color: red" @click="delSizeBtn(scope.$index)"></el-button>
                                <el-tooltip content="上移" placement="top">
                                    <el-button type="text" class="el-icon-top" @click="moveBtn('up', scope.$index)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="下移" placement="top">
                                    <el-button type="text" class="el-icon-bottom" @click="moveBtn('down', scope.$index)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="置顶" placement="top">
                                    <el-button type="text" class="el-icon-upload2" @click="moveBtn('top', scope.$index)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="置底" placement="top">
                                    <el-button type="text" class="el-icon-download" @click="moveBtn('bottom', scope.$index)"></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button @click="editVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveBtn" :loading="saveLoading">{{ saveLoading ? '提交中 ...' : '保 存' }}</el-button>
            </div>
        </el-drawer>

        <!--修改、新增尺码信息-->
        <el-dialog :visible.sync="editSizeVisible" :title="editSizeTitle" width="400px" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form label-width="90px" label-position="right">
                <el-form-item label="尺码">
                    <el-select v-model="editSizeForm.size_code" value-key="id" placeholder="请选择尺码" size="small">
                        <el-option v-for="(item,index) in sizeList" :key="index" :label="item.s_title" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身高(cm)">
                    <el-select v-model="editSizeForm.height_code" value-key="id" clearable placeholder="请选择身高(cm)" size="small">
                        <el-option v-for="(item,index) in heightList" :key="index" :label="item.s_title" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="editForm.type == 8 ? '腰围' : '胸围'">
                    <el-select v-model="editSizeForm.waist_code" value-key="id" clearable placeholder="请选择" size="small">
                        <el-option v-for="(item,index) in waistList" :key="index" :label="item.s_title" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="editSizeVisible=false" plain>取 消</el-button>
                <el-button type="primary" size="small" @click="sumbitSizebtn">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

import {basecodeList, basecodeSet, basecodeStatus} from "@/api/bs/base";
import {sizeList} from "@/api/bs/size";

export default {
    name: "codonsBase",
    props:{
        nodeActions: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            isLoad: false,
            tableHeight: window.innerHeight - 284,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],

            form: {
                title: "",
                status: "1"
            },

            rules:{
                base_category: [{ required: true, message: '请输入服装类别名称', trigger: 'change' }]
            },
            types: [
                {label: "腰围", type: 8},
                {label: "胸围", type: 9}
            ],
            drawerTableHeight: window.innerHeight - 310,
            editVisible: false,
            saveLoading: false,
            editTitle: "修改基码",
            editForm: {},

            editSizeVisible: false,
            editSizeTitle: "新增尺码信息",
            editSizeForm: {is_base: 0, size_code:{}, height_code:{}, waist_code:{}},

            sizeList: [], // 尺码列表
            heightList: [], // 身高列表
            waistList: [], //胸围/腰围列表
        }
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                status: this.form.status
            };
            if(this.form.title){
                param.title = this.form.title;
            }
            this.loading = true;
            basecodeList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },

        //保存基码数据
        saveBtn(){
            this.saveLoading = true;
            basecodeSet({data: JSON.stringify(this.editForm)}).then((res) => {
                this.saveLoading = false;
                if(res.code === 0){
                    this.editVisible = false;
                    this.$message.success("保存成功");
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
        //修改状态
        changStatus(index, value){
            let msg = value ? "启用" : "禁用"
            this.$confirm("是否"+msg+"，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value
                };
                basecodeStatus(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "base_status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "base_status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "base_status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },
        //打开编辑
        openEditBtn(row){
            this.editTitle = "修改基码";
            this.editVisible = true;
            this.editForm = JSON.parse(JSON.stringify(row));
            this.loadSizeInit();
        },
        //打开新增
        openAddBtn(){
            this.editTitle = "新增基码";
            this.editVisible = true;
            this.editForm = {};
            this.loadSizeInit();
        },
        //选择基码
        changeBaseBtn(value, index){
            for(let i in this.editForm.base_size_code){
                this.$set(this.editForm.base_size_code[i], "is_base", value && index == i ? value : 0);
            }
        },
        //选择胸围/腰围
        changeWaistBtn(type){
            this.editForm.base_size_code = [];
            this.getRuleSizeList(type);
        },
        //删除尺码
        delSizeBtn(index){
            this.editForm.base_size_code.splice(index, 1);
        },
        //尺码移动按钮
        moveBtn(type, index){
            let obj = this.editForm.base_size_code[index];
            let length = this.editForm.base_size_code.length;
            switch (type){
                case 'up'://上移
                    if(index==0){
                        return;
                    }
                    this.editForm.base_size_code.splice(index, 1);
                    this.editForm.base_size_code.splice(index-1, 0, obj);
                    break;
                case 'down'://下移
                    if(index == length-1){
                        return;
                    }
                    this.editForm.base_size_code.splice(index, 1);
                    this.editForm.base_size_code.splice(index+1, 0, obj);
                    break;
                case 'top'://置顶
                    if(index==0){
                        return;
                    }
                    this.editForm.base_size_code.splice(index, 1);
                    this.editForm.base_size_code.splice(0, 0, obj);
                    break;
                case 'bottom'://置底
                    if(index == length-1){
                        return;
                    }
                    this.editForm.base_size_code.splice(index, 1);
                    this.editForm.base_size_code.splice(length-1, 0, obj);
                    break;
            }
        },
        //打开编辑尺码
        openEditSizeBtn(index, row){
            this.editSizeVisible = true;
            this.editSizeTitle = "修改尺码信息";
            this.editSizeForm = {index: index, size_code:{}, height_code:{}, waist_code:{},is_base: 0};
            let obj = JSON.parse(JSON.stringify(row));
            //老系统的问题：id都是字符串类型
            this.editSizeForm.is_base = obj.is_base;
            if(obj.size_code.id){
                this.editSizeForm.size_code = {
                    id: parseInt(obj.size_code.id),
                    title: obj.size_code.title
                };
            }
            if(obj.height_code.id){
                this.editSizeForm.height_code = {
                    id: parseInt(obj.height_code.id),
                    title: obj.height_code.title
                };
            }
            if(obj.waist_code.id){
                this.editSizeForm.waist_code = {
                    id: parseInt(obj.waist_code.id),
                    title: obj.waist_code.title
                };
            }
            console.log(this.editSizeForm)
        },
        //打开新增尺码
        openAddSizeBtn(){
            this.editSizeVisible = true;
            this.editSizeTitle = "新增尺码信息";
            this.editSizeForm = {is_base: 0, size_code:{}, height_code:{}, waist_code:{}};
        },
        //确定尺码
        sumbitSizebtn(){
            console.log(this.editSizeForm);
            let obj = {
                is_base: this.editSizeForm.is_base,
                size_code: {
                    id: this.editSizeForm.size_code.id,
                    title: this.editSizeForm.size_code.s_title ? this.editSizeForm.size_code.s_title : this.editSizeForm.size_code.title,
                },
                height_code: {
                    id: this.editSizeForm.height_code.id,
                    title: this.editSizeForm.height_code.s_title ? this.editSizeForm.height_code.s_title : this.editSizeForm.height_code.title,
                },
                waist_code: {
                    id: this.editSizeForm.waist_code.id,
                    title: this.editSizeForm.waist_code.s_title ? this.editSizeForm.waist_code.s_title : this.editSizeForm.waist_code.title,
                }
            };
            if(!obj.size_code.title){
                this.$message.warning("尺码不能为空");
                return;
            }
            if(this.editSizeForm.index>=0){
                this.editForm.base_size_code.splice(this.editSizeForm.index, 1, obj);
            }else{
                this.editForm.base_size_code.push(obj);
            }
            this.editSizeVisible = false;
        },
        //初始化加载尺寸信息
        loadSizeInit(){
            //加载尺寸、身高、胸围数据
            if(this.sizeList.length == 0){
                this.getRuleSizeList(1);
            }
            if(this.heightList.length == 0){
                this.getRuleSizeList(7);
            }
            if(this.waistList.length == 0 && this.editForm.type){
                this.getRuleSizeList(this.editForm.type);
            }
        },
        //获取1尺寸、7身高、9胸围、8腰围列表数据
        getRuleSizeList(type){
            let param = {page: 1, limit: 1000, status: 1, type: type};
            sizeList(param).then((res)=>{
                if(type == 1){
                    this.sizeList = res.data.data;
                }
                if(type == 7){
                    this.heightList = res.data.data;
                }
                if(type == 8 || type == 9){
                    this.waistList = res.data.data;
                }
            })
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
